<template>
<view class="my">
		<view class="msg">
			<image src="/static/msg.png" @tap.stop="handleNavTo({ url: '/pages/mf/my/message' })"></image>
		</view>
		<view class="name">
			<image src="/static/head_portrait.png"></image>
			<!-- <text class="name-nickname">昵称</text> -->
      <view class="name-nickname" v-if="userInfo && !userInfo.nickname">
        {{ user && user.username }}
      </view>
      <view class="username" v-else> {{ userInfo && userInfo.nickname }} </view>
			<view class="name-UID">
				<text class="name-UID-name">UID：M12066558</text>
				<image @click="copy()" src="/static/copyUID.png" class="name-UID-copy"></image>
			</view>
		</view>
		<!-- 服务 -->
		<view class="serive" @tap.stop="handleNavTo({ url: '/pages/mf/my/functionPage/myOrder' })">
			<view class="serive-content" @click="toOthers('order-center')">
				<image src="/static/order_center.png"></image>
				<text class="serive-content-text">{{orderText}}</text>
			</view>
			<view class="serive-content"  @tap.stop="handleNavTo({ url: '/pages/my/fix-order/index' })">
				<image src="/static/pledge_order.png"></image>
				<text class="serive-content-text">{{pledgeOrder}}</text>
			</view>
			<view class="serive-content" @tap.stop="handleNavTo({ url: '/pages/mf/my/functionPage/myAssets' })">
				<image src="/static/my_assets.png"></image>
				<text class="serive-content-text">{{myAssets}}</text>
			</view>
			<view class="serive-content" style="margin-right: 0rpx;" @tap.stop="handleNavTo({ url: '/pages/mf/my/functionPage/invitation' })">
				<image src="/static/invite_link.png"></image>
				<text class="serive-content-text">{{inviteLink}}</text>
			</view>
		</view>
		<!-- 设置 -->
		<view class="set">
			<view class="set-bar" @click="toOthers('team')">
				<image src="/static/my_team.png"></image>
				<text>{{myteam}}</text>
				<u-icon name="arrow-right" width="18rpx" height="32rpx" class="set-bar-icon"></u-icon>
			</view>
			<view class="splitline"></view>
			<view class="set-bar" @tap.stop="handleNavTo({ url: '/pages/auth/security/index' })">
				<image src="/static/account-settings.png"></image>
				<text>{{accountSettings}}</text>
				<u-icon name="arrow-right" width="18rpx" height="32rpx" class="set-bar-icon"></u-icon>
			</view>
			<view class="splitline"></view>
			<view class="set-bar" @click="toOthers('help')">
				<image src="/static/help_center.png"></image>
				<text>{{helpCenter}}</text>
				<u-icon name="arrow-right" width="18rpx" height="32rpx" class="set-bar-icon"></u-icon>
			</view>
			<view class="splitline"></view>
			<view class="set-bar" @tap.stop="handleNavTo({ url: '/pages/mf/my/about/index' })">
				<image src="/static/about_us.png"></image>
				<text>{{aboutUs}}</text>
				<u-icon name="arrow-right" width="18rpx" height="32rpx" class="set-bar-icon"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      notice_num: 0,
      invitation: null,
      isLoading: false,
      avatarImg: null,
      orderText: '订单中心',
      pledgeOrder: '质押订单',
      myAssets: '我的资产',
      inviteLink: '邀请链接',
      myteam: '我的团队',
      accountSettings: '账号设置',
      helpCenter: '帮助中心',
      aboutUs: '关于我们'
    };
  },
  computed: {
    ...mapState("user", ["user"]),
    ...mapState("mf/my", ["userInfo"]),
    ...mapState("system", ["settings"]),
    topFun() {
      return [
        {
          name: this.$t("mf.my.order_center"),
          img: "/static/mf/my/index/wallet.png",
          url: "/pages/mf/my/functionPage/myOrder",
        },
        {
          name: this.$t("mf.my.my_assets"),
          img: "/static/mf/my/index/wallet.png",
          url: "/pages/mf/my/functionPage/myAssets",
        },
        {
          name: this.$t("new.invite"),
          img: "/static/mf/my/index/yaoqing.png",
          url: "/pages/mf/my/functionPage/invitation",
          type: "copy",
        },
      ];
    },
    botFun() {
      return [
        {
          name: this.$t("mf.my.my_team"),
          img: "/static/mf/my/index/team.png",
          url: "/pages/mf/my/functionPage/myTeam",
          style: {
            width: "46rpx",
            height: "28rpx",
          },
        },
        // {
        //   name: this.$t("mf.my.invitation"),
        //   img: "/static/mf/my/index/friend.png",
        //   url: "/pages/mf/my/functionPage/invitation",
        //   style: {
        //     width: "38rpx",
        //     height: "40rpx",
        //   },
        // },
        {
          name: this.$t("new.suanli_order"),
          img: "/static/mf/my/index/zhiya.png",
          url: "/pages/mf/shop/suanliOrderList",
          style: {
            width: "36rpx",
            height: "43rpx",
            marginRight: "10rpx",
          },
        },
        {
          name: this.$t("mf.my.serve"),
          img: "/static/mf/my/index/serve.png",
          url: "/pages/mf/my/server",
          style: {
            width: "36rpx",
            height: "37rpx",
            marginRight: "10rpx",
          },
        },
        {
          name: this.$t("mf.my.security"),
          img: "/static/mf/my/index/center.png",
          url: "/pages/auth/security/index",
          style: {
            width: "36rpx",
            height: "43rpx",
            marginRight: "10rpx",
          },
        },
      ];
    },
    avatar_img() {
      if (this.userInfo && this.userInfo.header) {
        return this.userInfo.header;
      } else {
        return "/static/mf/my/rem.png";
      }
    },
  },
  methods: {
    ...mapActions("user", ["loadUser"]),
    ...mapActions("mf/my", [
      "noticeNum",
      "loadUserInfo",
      "generateInvitation",
      "editUser",
    ]),
    ...mapActions("media", ["upload"]),
    toOthers(str) {
    	if (str == "team") {
    		uni.navigateTo({
    			url: "/pages/mf/my/functionPage/myTeam"
    		})
    	} else if (str == "set") {
    		uni.navigateTo({
    			url: "./setup/index"
    		})
    	} else if (str == "about") {
    		uni.navigateTo({
    			url: "./about/index"
    		})
    	} else if (str == "help") {
    		uni.navigateTo({
    			url: "/pages/mf/my/server"
    		})
    	} else if (str == "order-center") {
    		uni.navigateTo({
    			url: "./order-center/index"
    		})
    	} else if (str == "fix-order") {
    		uni.navigateTo({
    			url: "./fix-order/index"
    		})
    	} else if (str == "my-money") {
    		uni.navigateTo({
    			url: "./my-money/index"
    		})
    	} else if (str == "invite") {
    		uni.navigateTo({
    			url: "./invite/index"
    		})
    	} else if (str == "mess") {
    		uni.navigateTo({
    			url: "./mess/index"
    		})
    	}
    },
    copy() {
    	uniCopy({
    		content: 'M12066558',
    		success: (res) => {
    			uni.showToast({
    				title: res,
    				icon: 'none'
    			})
    		},
    		error: (e) => {
    			uni.showToast({
    				title: e,
    				icon: 'none',
    				duration: 3000,
    			})
    		}
    	})
    },
    handleUrl(item) {
      console.log(item);
      if (item.type == "copy") {
        if (this.userInfo.buy_order == 0) {
          this.makeToast({ title: "购买产品后才可推荐他人" });
          return;
        } else {
          this.handleCopy({
            content: this.settings.share_link + "?code=" + this.invitation,
          });
        }
      }
      if (item.url) {
        console.log(item.url);
        this.handleNavTo({ url: item.url });
      }
    },
    switchAvatar() {
      uni.chooseImage({
        count: 1,
        success: async (params) => {
          uni.showLoading({
            title: "更改中",
          });
          let res = await this.upload(params);
          if (res.statusCode == 200) {
            this.avatarImg = res.url;
          }
          await this.editUser({
            header: this.avatarImg,
          });
          this.loadUserInfo();
          uni.hideLoading();
        },
      });
    },
  },
  async onLoad() {
    this.isLoading = true;
    let {
      data: { token },
    } = await this.generateInvitation();
    this.invitation = token;
    this.isLoading = false;
    this.loadUser();
    await this.loadUserInfo();
    console.log(this.userInfo);
  },
  async onShow() {
    this.notice_num = await this.noticeNum();
  },
};
</script>

<style scoped lang="scss">
page {
		background-color: #f5f5f5;
	}

	.my {
		color: #222;

		.msg {
			background-color: #2A96EE;
			display: flex;
			justify-content: flex-end;
			font-size: 0;

			image {
				width: 36rpx;
				height: 44rpx;
				margin-right: 28rpx;
			}
		}

		.name {
			width: 755rpx;
			height: 390rpx;
			color: #fff;
			background-color: #2A96EE;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 120rpx;
				height: 120rpx;
				margin-top: 42rpx;
			}

			.name-nickname {
				margin-top: 19rpx;
				font-size: 32rpx;
			}

			.name-UID {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 17rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin: 0;
					margin-left: 10rpx;
				}

				.name-UID-name {
					font-size: 24rpx;
				}
			}
		}

		.serive {
			width: 702rpx;
			height: 176rpx;
			border-radius: 12rpx;
			background-color: #fff;
			margin-top: -70rpx;
			margin: -70rpx auto 0rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;

			.serive-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 95rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.serive-content-text {
					font-size: 24rpx;
					margin-top: 12rpx;
				}
			}
		}

		.set {
			width: 702rpx;
			height: 406rpx;
			background-color: #fff;
			margin: 20rpx auto 0rpx;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			.set-bar {
				display: flex;
				align-items: center;
				height: 100rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 30rpx;
				}

				text {
					font-size: 32rpx;
					margin-left: 22rpx;
				}

				.set-bar-icon {
					margin-left: 434rpx;
					color: #a1a1a1;
				}
			}

			.splitline {
				width: 610rpx;
				height: 2rpx;
				background: #F5F5F5;
				border-radius: 1rpx;
				margin: 0 auto;
			}
		}
	}
</style>
